.arrow(@direction, @size, @color) {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: @size;
  cursor: pointer;
  & when (@direction = top) {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent @color transparent;
    border-top: none;
  }
  & when (@direction = bottom) {
    border-style: solid dashed dashed dashed;
    border-color: @color transparent transparent transparent;
    border-bottom: none;
  }
  & when (@direction = right) {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent @color;
    border-right: none;
  }
  & when (@direction = left) {
    border-style: dashed solid dashed dashed;
    border-color: transparent @color transparent transparent;
    border-left: none;
  }
}

.clr() {
  &:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
  }
  *height: 1%;
}

.linear-gradient(@direction, @color1: transparent, @color2: #306eff, @color3: transparent) {
  background: -o-linear-gradient(@direction, @color1, @color2, @color3); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(@direction, @color1, @color2, @color3); /* Firefox 3.6 - 15 */
  background: linear-gradient(to @direction, @color1, @color2, @color3); /* 标准的语法 */
}

.linear-gradient-edg(@edg:0, @color1: transparent, @color2: #306eff, @color3: transparent) {
  background: -o-linear-gradient(@edg, @color1, @color2, @color3); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(@edg, @color1, @color2, @color3); /* Firefox 3.6 - 15 */
  background: linear-gradient(@edg, @color1, @color2, @color3); /* 标准的语法 */
}

.scrollBar(@width: 10px, @height: 10px, @outColor: @bgColor, @innerColor: @bgGrey, @radius: 5px, @shadow: null) {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar {
    width: @width;
    height: @height;
    background-color: @outColor;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    @if (@shadow != null) {
      -webkit-box-shadow: @shadow;
    }
    @if (@radius != null) {
      border-radius: @radius;
    }
    background-color: @outColor;
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    @if (@shadow != null) {
      -webkit-box-shadow: @shadow;
    }
    @if (@radius != null) {
      border-radius: @radius;
    }
    background-color: @innerColor;
    border: 1px solid @innerColor;
  }
}
.gridContainer(@number:4,@gap:0px) {
  display: grid;
  grid-template-columns: repeat(@number, 1fr);
  grid-gap: @gap;
}